<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>商品列表 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
<!--    <link rel="stylesheet" th:href="@{/css/tailwindcss.min.css}"/>-->
    <script src="https://cdn.tailwindcss.com"></script>

</head>
<body class="bg-gray-100">
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>

<!-- Main Content -->
<main class="container-fluid mx-auto my-12">
    <!--  Filter -->
    <form th:action="@{/buyer}" method="get" class="flex flex-wrap items-center justify-start gap-4 bg-gray-50 p-4 rounded-lg shadow-sm">
        <select id="categoryFilter" name="categoryId" class="border p-2 rounded-md shadow-sm w-full sm:w-1/4 focus:ring focus:ring-blue-300">
            <option value="">所有分类</option>
            <option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.name}" th:selected="${category.id == categoryId}"></option>
        </select>
        <input type="hidden" name="page" value="1">
        <input type="hidden" name="size" value="12">

        <button type="submit" class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition">
            <i class="fas fa-filter mr-2"></i> 筛选
        </button>

        <a th:href="@{/buyer}" class="flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition">
            <i class="fas fa-redo mr-2"></i> 重置
        </a>
    </form>

    <!-- Product Grid -->
    <div id="product_list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
        <div th:each="product : ${products}" class="product-card bg-white rounded-lg shadow-md">
            <img th:src="${product.imageUrl} ?: '/uploads/placeholder.png'" th:alt="${product.name}" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4">
                <a th:href="@{/buyer/product/{id}(id=${product.id})}">
                    <h3 class="text-lg font-semibold text-gray-800 hover:text-blue-600" th:text="${product.name}"></h3>
                </a>
                <p class="text-gray-600" th:text="'分类: ' + ${product.categoryName}"></p>
                <p class="text-gray-600" th:text="'供应商: ' + ${product.supplierName}"></p>
                <p class="text-gray-600" th:text="'发货地: ' + ${product.shippingRegion}"></p>
                <p class="text-red-600 font-bold text-lg" th:text="'¥' + ${#numbers.formatDecimal(product.price, 1, 2)}"></p>
                <div sec:authorize="!isAuthenticated() or !hasAuthority('BUYER')" class="mt-3">
                </div>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    <div id="pagination" class="flex flex-col items-center mt-8 space-y-3">
        <div class="text-gray-700">
            <span>共 <span th:text="${totalItems}"></span> 件商品</span>
        </div>
        <div class="flex justify-center space-x-3">
            <a th:href="@{/buyer(page=${currentPage - 1}, size=12, search=${search}, categoryId=${categoryId})}"
               th:classappend="${currentPage == 1} ? 'bg-blue-600 text-white px-5 py-2 rounded-lg opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700'"
               th:attr="disabled=${currentPage == 1} ? 'disabled' : null">上一页</a>
            <div class="flex space-x-1">
                <a th:each="i : ${#numbers.sequence(1, totalPages)}"
                   th:href="@{/buyer(page=${i}, size=12, search=${search}, categoryId=${categoryId})}"
                   th:classappend="${i == currentPage} ? 'bg-blue-600 text-white px-3 py-1 rounded-lg' : 'bg-gray-200 text-gray-700 px-3 py-1 rounded-lg hover:bg-blue-200'"
                   th:text="${i}"></a>
            </div>
            <a th:href="@{/buyer(page=${currentPage + 1}, size=12, search=${search}, categoryId=${categoryId})}"
               th:classappend="${currentPage == totalPages} ? 'bg-blue-600 text-white px-5 py-2 rounded-lg opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-5 py-2 rounded-lg hover:bg-blue-700'"
               th:attr="disabled=${currentPage == totalPages} ? 'disabled' : null">下一页</a>
        </div>
    </div>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<script src="/js/jquery-latest.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</body>
</html>